<template>
  <div class="container">
    <el-row type="flex" align="middle" justify="space-between">
      <!--移动端-->
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up" style="line-height: 60px">
        <el-button type="primary" :icon="Expand" plain @click="drawerOpenClick"></el-button>
      </el-col>
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up text-center" style="line-height: 60px">
        {{ setting?.name }}
      </el-col>
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up" style="line-height: 60px;">
        <template v-if="loginStatus">
          <el-row type="flex" align="middle" justify="end">
            <div @click="jumpToUrl('/user/' + userInfo.userId)">
              <Avatar style="position: relative;top: 7px;"
                      :size="30"
                      :src="userInfo.avatar"
                      round
                      :alt="userInfo.nickName || userInfo.userName"
              >{{ (userInfo.nickName || userInfo.userName)?.charAt(0) }}
              </Avatar>
            </div>
          </el-row>
        </template>
        <template v-else>
          <el-button type="primary" plain style="float: right" @click="jumpToUrl('/login')">登录</el-button>
        </template>
      </el-col>
      <!--PC端-->
      <el-col class="hidden-xs-only hidden-sm-only" :span="3" style="line-height:60px;">
        {{ setting?.name }}
      </el-col>
      <ClientOnly>
        <el-col class="hidden-xs-only hidden-sm-only" :span="15" v-if="menus.length > 0">
          <el-menu :default-active="activeIndex.toString()" mode="horizontal" active-text-color="#409EFF">
            <template v-for="(item,index) in menus">
              <el-menu-item v-if="!item.children" :index="index + ''" :key="item.id" @click="jumpToUrl(item.menuUrl)">{{
                  item.menuName
                }}
              </el-menu-item>
              <el-sub-menu v-else :index="index + ''" :key="item.id">
                <template #title>{{ item.menuName }}</template>
                <el-menu-item :index="index + '-' + i" @click="jumpToUrl(j.menuUrl)" v-for="(j,i) in item.children"
                              :key="i">{{ j.menuName }}
                </el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-col>
      </ClientOnly>
      <el-col v-show="!loginStatus" class="hidden-xs-only hidden-sm-only" :span="6">
        <div class="pc-login-button">
          <el-button type="primary" plain @click="navigateTo('/login')">登录</el-button>
        </div>
      </el-col>
      <el-col v-if="loginStatus" class="hidden-xs-only hidden-sm-only" :span="6">
        <el-dropdown class="pointer" style="float: right;">
          <span class="el-dropdown-link">
            <nuxt-link :to="'/user/' + userInfo.userId">
              <el-row class="fs-14" type="flex" align="middle" justify="end">
                <div>
                  {{
                    (userInfo.nickName === null || userInfo.nickName === '')
                        ? userInfo.userName : userInfo.nickName
                  }}&nbsp;
                </div>
                <div>
                  <Avatar :size="30"
                          :src="userInfo.avatar"
                          round
                          :alt="userInfo.nickName || userInfo.userName"
                  >{{ (userInfo.nickName || userInfo.userName)?.charAt(0) }}</Avatar>
                </div>
              </el-row>
            </nuxt-link>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">
                <div>退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <!--移动端抽屉导航-->
    <el-drawer
        :title="setting.value?.name"
        v-model="isDrawerOpen"
        size="60%"
        direction="ltr"
        @open="drawerOpen"
        @close="drawerClose"
        append-to-body
        destroy-on-close
    >
      <el-menu :default-active="activeIndex.toString()" active-text-color="#409EFF">
        <template v-for="(item,index) in menus">
          <el-menu-item v-if="!item.children" :index="index + ''" @click="jumpToUrl(item.menuUrl)">{{
              item.menuName
            }}
          </el-menu-item>
          <el-sub-menu v-else :index="index + ''">
            <template slot="title">{{ item.menuName }}</template>
            <el-menu-item :index="index + '-' + i" @click="jumpToUrl(j.menuUrl)" v-for="(j,i) in item.children"
                          :key="i">{{ j.menuName }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
      <el-row class="text-center mg-t-20" type="flex" justify="space-between" align="middle" style="flex-wrap: wrap;">
        <el-col v-if="loginStatus">
          <nuxt-link :to="'/user/' + userInfo.userId">
            <el-row type="flex" align="middle" justify="center">
              <div>
                <el-avatar icon="el-icon-user-solid"
                           :size="30"
                           :src="userInfo.avatar"></el-avatar>&nbsp;
              </div>
              <div>
                {{ (userInfo.nickName === null || userInfo.nickName === '') ? userInfo.userName : userInfo.nickName }}
              </div>
            </el-row>
          </nuxt-link>
        </el-col>
        <el-col v-else>
          <NuxtLink to="/login">
            <el-button class="login-button" type="primary" round>登录</el-button>
          </NuxtLink>
        </el-col>
        <el-col v-if="loginStatus" class="mg-t-10">
          <el-button type="primary" round @click="logout">退出登录</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import {Menu} from "@/entity/menu";
import {Expand} from "@element-plus/icons-vue";

let activeIndex = ref("-1");
// 前往用户中心的url：防止用户信息还未加载出来，用户就去点击
const isDrawerOpen = ref(false);
const {menus} = useStoreToRefs(useStores.menu());
const {setting} = useStoreToRefs(useStores.setting());
const {userInfo, loginStatus} = useStoreToRefs(useStores.user());
const {logout} = useStores.user();
const router = useRouter();
// 监听当前路由
watch(
    () => router.currentRoute.value,
    (route: any) => {
      let find = false;
      if (!menus) {
        return;
      }
      menus.value.map((item: Menu, index: number) => {
        if (route.path.indexOf(item.menuUrl) !== -1) {
          activeIndex.value = index + '';
          find = true;
        } else {
          if (route.path.indexOf("/classify") !== -1 && item.menuUrl?.indexOf("/classify") !== -1) {
            activeIndex.value = index + '';
            find = true;
          }
        }
        if (item.children) {
          item.children.map((items: Menu, i: number) => {
            if (route.path.indexOf(items.menuUrl) !== -1) {
              activeIndex.value = index + '-' + i;
              find = true;
            }
          })
        }
      });
      if (!find) {
        activeIndex.value = '-1';
      }
    },
    {immediate: true}
);
const jumpToUrl = (url: string) => {
  router.push(url);
}
const drawerOpenClick = () => {
  isDrawerOpen.value = true;
};
const drawerOpen = () => {
  const body = document.querySelector("body");
  if (body) {
    body.style.width = "100%";
  }
};
const drawerClose = () => {
  const body = document.querySelector("body");
  if (body) {
    body.style.removeProperty("width");
  }
}
</script>

<style scoped lang="scss">
.el-menu {
  .is-active {
    background-color: #ecf5ff
  }

  .el-menu--horizontal {
    border: none
  }
}

.pc-login-button {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.login-button {
  width: 80%;
}

::v-deep(.el-menu) {
  border: none;
  height: 60px;
}
</style>